<template>
  <div class="content">
    <div>
      <el-select placeholder="全部" v-model="area" style="width: 200px; margin-bottom: 20px;">
        <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <span style="font-weight: bold;color: white;margin-left: 20px;">雨量实况</span>
      <el-table
        :data="groupData"
        style="width: 100%"
        stripe
        :header-cell-style="headerCellStyle"
        :cell-style="cellStyle"
        :row-style="rowStyle"
      >
        <el-table-column prop="region" label="景区" fixed="left" min-width="18%"></el-table-column>
        <el-table-column prop="station" label="区域气象站" min-width="30%"></el-table-column>
        <el-table-column prop="precipitation" label="分钟降雨量" min-width="25%"></el-table-column>
        <el-table-column prop="hourlyRainfall" label="1小时降雨量" min-width="25%"></el-table-column>
        <el-table-column prop="twoHourRainfall" label="2小时降雨量" min-width="25%"></el-table-column>
        <el-table-column prop="threeHourRainfall" label="3小时降雨量" min-width="25%"></el-table-column>
        <el-table-column prop="sixHourRainfall" label="6小时降雨量" min-width="25%"></el-table-column>
        <el-table-column prop="twelveHourRainfall" label="12小时降雨量" min-width="25%"></el-table-column>
        <el-table-column prop="twentyFourHourRainfall" label="24小时降雨量" min-width="25%"></el-table-column>
        <el-table-column prop="rainLevel" label="降水量级(24小时)" min-width="28%"></el-table-column>
        <el-table-column prop="FortyEightHourRainfall" label="48小时降雨量" min-width="25%"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange"
        style="margin-top: 20px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Request from '@/api/weather/request';
import { Message } from 'element-ui';

export default {
  data() {
    return {
      area: '', 
      areaOptions: [
        { label: '全部', value: '' },
        { label: '宝兴', value: '宝兴' },
        { label: '汉源', value: '汉源' },
        { label: '九龙', value: '九龙' },
        { label: '芦山', value: '芦山' },
        { label: '冕宁', value: '冕宁' },
        { label: '名山', value: '名山' },
        { label: '石棉', value: '石棉' },
        { label: '天全', value: '天全' },
        { label: '荥经', value: '荥经' },
        { label: '雨城', value: '雨城' }
      ],
      groupData: [],
      list: [],
      currentPage: 1,
      pageSize: 13,
      total: 0,
    };
  },
  methods: {
    async fetchData(page = 1) {
      try {
        const response = await Request.get(`/weatherfacts/actualStatistics`, {
          params: {
            county: this.area, 
            pageNum: page,
            pageSize: this.pageSize,
            isTravel:true
          }
        });

        if (response.status === 200) {
          this.list = response.data.rainData.records;
          this.total = response.data.rainData.total;
          console.log(this.list)
          this.groupData = this.list.map(item => ({
            region: item.county,                // 景区
            station: item.wsName,               // 区域气象站
            precipitation: item.rainMinute,     // 分钟降雨量
            hourlyRainfall: item.rain1h,        // 1小时降雨量
            twoHourRainfall: item.rain2h,       // 2小时降雨量
            threeHourRainfall: item.rain3h,     // 3小时降雨量
            sixHourRainfall: item.rain6h,       // 6小时降雨量
            twelveHourRainfall: item.rain12h,   // 12小时降雨量
            twentyFourHourRainfall: item.rain24h, // 24小时降雨量
            FortyEightHourRainfall: item.rain48h,  // 48小时降雨量
            rainLevel:item.rainLevel            //降雨量级
          }));
        } else {
          console.log('请求出错');
        }
      } catch (error) {
        console.error('请求失败', error);
      }
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData(page);
    },
    headerCellStyle() {
      return {
        background: "#011A10",
        color: "#fff",
        opacity: 0.8,
      };
    },
    cellStyle() {
      return {
        background: "#00371D",
        color: "#fff",
      };
    },
    rowStyle() {
      return {
        height: "30px",
      };
    },
  },
  watch: {
    area() {
      this.currentPage = 1;
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>


<style scoped>
.content {
  width: 100%;
}
</style>
